<script setup>
defineOptions({
  name: 'CouponItem'
})
defineProps({
  item: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
</script>

<template>
  <div class="coupon" @click="$emit('click', item)">
    <div class="left">
      <p>￥{{ item.reduce_price }}</p>
      <p>满{{ item.min_price }}元可用</p>
    </div>
    <div class="middle"></div>
    <div class="right">
      <p class="name">{{ item.name }}</p>
      <p class="description">
        <span>{{
          item.start_time
            ? `${item.start_time}~${item.end_time}`
            : `领取${item.expire_day}天内有效`
        }}</span>
        <slot></slot>
      </p>
      <div class="type">满减券</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.coupon {
  width: 345px;
  height: 90px;
  margin: 8px auto;
  background: linear-gradient(-128deg, #ff6d6d, #ff3636);
  color: white;
  display: flex;
  overflow: hidden;

  .left {
    height: 100%;
    width: 113px;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;

    p:first-child {
      font-weight: 700;
      font-size: 26px;
    }

    p:last-child {
      font-size: 11px;
    }
  }

  .middle {
    width: 2px;
    height: 100%;
    background-color: white !important;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      width: 12px;
      height: 6px;
      background: white;
      left: -5px;
      border-radius: 0 0 8px 8px;
    }

    &::after {
      content: '';
      position: absolute;
      width: 12px;
      height: 6px;
      background: white;
      left: -5px;
      bottom: 0;
      border-radius: 8px 8px 0 0;
    }
  }

  .right {
    height: 100%;
    width: 224px;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    padding-left: 10px;
    position: relative;
    overflow: hidden;

    .name {
      font-size: 16px;
    }

    .description {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
    }

    .type {
      position: absolute;
      top: 0;
      right: 0;
      width: 64px;
      padding: 3px 0;
      background: #a771ff;
      font-size: 10px;
      text-align: center;
      color: #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transform-origin: 32px 32px;
      transform-origin: 32px 32px;
    }
  }
}
</style>
